<script setup lang="ts">
import router from "@/router";
import { User, Lock, Back } from "@element-plus/icons-vue";

import { storeToRefs } from "pinia";
import useStore from "@/stores";
const { admin } = useStore();
const { user } = storeToRefs(admin);
const command = (e: number) => {
  switch (e) {
    case 0:
      router.push("/index/info");
      break;
    case 1:
      router.push("/index/changepassword");
      break;
    case 2:
      admin.outLogin();
      break;
  }
};
</script>

<template>
  <div>
    <el-dropdown trigger="click" @command="command">
      <el-avatar :src="user.avatarUrl" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :command="0" :icon="User">
            {{ $t("admin.info") }}
          </el-dropdown-item>
          <el-dropdown-item :command="1" :icon="Lock">
            {{ $t("admin.password") }}
          </el-dropdown-item>
          <el-dropdown-item :command="2" :icon="Back">
            {{ $t("admin.outlogin") }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped lang="less"></style>
